<script setup>
import SubjectCard from '/src/components/SubjectCard.vue';
import Pagination from '/src/components/Pagination_lxw.vue';
import { useRouter } from 'vue-router';
import {ref, watchEffect} from 'vue'
import getRequest from '../../utils/lxw_request';

const router = useRouter()

// 为了使用SubjectCard里的变量




// SubjectCard's function
// button's text 是 i18n里的内容
const buttons = [

    {
        text: 'subjects.subjectCard.operation.detail',
        func: getSubjectDetail
    },
    {
        text: 'subjects.subjectCard.operation.quitCourse',
        func: function quit({course_id}) {
            getRequest(`/stu/course/join/${course_id}`, "DELETE", new Headers({ 'Content-Type': 'application/json' }))
                .then((response) => response.json())
                .then((json) => {
                    if (json.code === 200) {
                        alert("退出课程成功");
                        this.emit('getMyJoinedCourses'); 
                    } else {
                        alert(json.msg);
                    }
                })
                .catch((err) => {
                    console.error(err);
                })
        }
    }
]

function getSubjectDetail({subject_id}) {
    router.push({name: 'subjects_joined_detail', params:{subject_id}})

}



// API
const courses = ref([]);
const current = ref(1)
const pageSize = ref(10)
function changeCurrentPage(cur) {
    current.value = cur;
}

function changePageSize(size) {
    pageSize.value = size;
}






function getCourses() {
    const searchParams = new URLSearchParams();
    searchParams.set("current", current.value);
    searchParams.set("pageSize", pageSize.value);
    getRequest(`/stu/course/join?${searchParams.toString()}`, "GET", new Headers({'Content-Type': 'application/json'}))
    .then((response) => response.json())
    .then((json) => {
        if(json.code === 200) {
            json.data.records === undefined ? courses.value = [] : courses.value = json.data.records;
        } else {
            alert(json.msg);
        }
    })
    .catch((err) => {
        console.error(err);
    })
}

watchEffect(() => {
    getCourses();
})

</script>
<template>
    <div class="subject-my-subject-home">
        <div class="my-subject-home-header">
            <div class="title" >
                <button type="button" >我加入的</button>
            </div>
        </div>
        <div class="my-subject-home-main"  >
            <SubjectCard v-for="(item, index) in courses" :key="index" style="margin: 14px 14px;" 
            :itemName="item['courseName']" :itemIntroduction="item['courseIntroduction']" :itemId="item['courseId']" :buttons="buttons" :params="[{subject_id: item['courseId']}, {course_id: item['courseId']}]"  
            @get-my-joined-courses="() => getCourses()" />
        </div>
        <div class="my-subject-home-pagination" >
            <Pagination :total="courses.length" @change-current-page="changeCurrentPage" @change-per-page-size="changePageSize"  />
        </div>
        
    </div>
    


</template>
<style scoped>
.subject-my-subject-home {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    top: 80px; 
    flex-wrap: wrap; 
    width: 100%;
    padding: 0px 89px;
    
}

.my-subject-home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 20px 14px;
    flex-wrap: wrap; 
    
}

.my-subject-home-header .title button {
    width: 170px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: none;
    border-radius: 10px;
    font-family: Source Han Sans CN;
	font-size: 20px;
    color: #ffffff;
    background-color: #8493a6;
    margin: 10px 0px;
    user-select: none;
    cursor: pointer;
}

.my-subject-home-main {
    display: flex;
    align-items: start;
    flex-wrap: wrap;  
    width: 100%;
    height: 615px;
    overflow-y: auto;
}

.my-subject-home-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 20px 0px;
}

</style>